<template>
  <div class="home">
    <!-- 巨幕 -->
    <div class="hugu_screen">
      <div class="screen_box">
        <h1>Hi, 别来无恙!</h1>
        <p class="description">...</p>
      </div>
    </div>

    <div class="home_content">
      <ArticleList :list="list" :isNull="isNull"></ArticleList>
      <!-- 分页 条目小于10 则隐藏 -->
      <el-pagination v-if="total > 10" @current-change="getArticleList" layout="prev, pager, next" :total="total">
      </el-pagination>
    </div>

  </div>
</template>

<script>
import ArticleList from '@/views/components/ArticleList'
export default {
  name: 'Home',
  components: {
    ArticleList,
  },
  data() {
    return {
      // categoryId:'',
      isLoad: true,
      isClear: false,
      isLoad: false,
      list: [],
      total: 0, // 总页数
      isNull: false
    }
  },
  mounted() {
    this.getArticleList()
  },
  methods: {
    // 获取文章列表
    getArticleList(page = 1, size = 10) {
      // 加载动画
      let loadingInstance = this.$loading.service({
        target: document.querySelector('.article_list'),
      })
      this.$api.httpArticleList({ page, size }).then((res) => {
        if (res.code == 200) {
          this.list = res.data.rows || []
          if (this.list.length == 0) this.isNull = true
          this.total = res.data.meta.count
          loadingInstance.close() // 关闭加载动画
        }
      })
    },
    goto(id) {
      this.$router.push('/article?id=' + id)
    },
  },
}
</script>

<style scoped lang="scss">
.home {
  width: 100%;

  // 巨幕
  .hugu_screen {
    overflow: hidden;
    background: rgba(0, 0, 0, 0) url('../assets/img/bg.svg') no-repeat scroll center center / cover;
    // background: rgba(0, 0, 0, 0) url('../assets/img/bg.svg') no-repeat fixed;
    // background-position: center center;
    height: 400px;
    width: 100%;
    position: relative;

    .screen_box {
      text-align: center;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);

      h1 {
        display: block;
        margin: 0 auto 1.8rem;
        font-size: 2.5rem;
      }

      .description {
        margin: 1.8rem auto;
        font-size: 1.6rem;
        line-height: 1.3;
      }
    }
  }

  // home内容
  .home_content {
    width: 1200px;
    margin: auto;
  }
}

// 分页
.el-pagination {
  margin: 48px 0;
  text-align: center;
}


/* ---------------------- 移动端 -------------------------- */

@media screen and (max-width: 1200px) {
  .home_content {
    width: 100% !important;
  }
}

@media screen and (max-width: 540px) {

  // 巨幕
  .hugu_screen {
    height: 220px !important;

    .screen_box {
      h1 {
        width: 320px !important;
        font-size: 28px !important;
      }
    }
  }
}
</style>
